<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script charset="UTF-8" src="js/vue.js"></script>
</head>
<body>
<!--<div id="app">{{content}}</div>-->

<!--todolist Vue实践-->
<!--<div id="app">-->
<!--<input type="text" v-model="inputValue">-->
<!--<button v-on:click="handleBtnClick">提交</button>-->
<!--<ul>-->
<!--<li v-for="item in list">{{item}}</li>-->
<!--</ul>-->
<!--</div>-->

<!--组件实践todolist-->
<!--<div id="app">-->
<!--<input type="text" v-model="inputValue">-->
<!--<button v-on:click="handleBtnClick">提交</button>-->
<!--<ul>-->
<!--<todo-item v-bind:content="item"-->
<!--v-for="item in list">{{item}}-->
<!--</todo-item>-->
<!--</ul>-->
<!--</div>-->
<!--父向子传值单击删除-->
<div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <todo-item :content="item"
                   :index="index"
                   v-for="(item,index) in list"
                   @delete="handleItemDelete">{{item}}
        </todo-item>
    </ul>
</div>

<script>
    // let a=document.getElementById("app");
    // a.innerHTML="Hello World";
    // setTimeout(function () {
    //     a.innerHTML="Bye World"
    // },2000)

    // let app = new Vue({
    //     el:'#app',
    //     data:{
    //         content:'Hello World'
    //     }
    // });
    // setTimeout(function () {
    //     app.$data.content='Bye World';
    // },2000);

    //MVVM   M模型层 V视图层 VM Vue监听M及更改V
    // let app = new Vue({
    //     el: '#app',
    //     data: {
    //         list: [],
    //         inputValue:''
    //     },
    //     methods: {
    //         handleBtnClick: function () {
    //            this.list.push(this.inputValue);
    //            this.inputValue='';
    //         }
    //     }
    // });

    //组件化todolist

    //全局组件
    // Vue.component("TodoItem", {
    //     props: ['content'],
    //     template: "<li>{{content}}</li>"
    // });
    //局部组件
    // let TodoItem = {
    //     props: ['content'],
    //     template: "<li>{{content}}</li>"
    // };
    // let app = new Vue({
    //     el: '#app',
    //     components: {
    //         TodoItem: TodoItem
    //     },
    //     data: {
    //         list: [],
    //         inputValue: ''
    //     },
    //     methods: {
    //         handleBtnClick: function () {
    //             this.list.push(this.inputValue);
    //             this.inputValue = '';
    //         }
    //     }
    // });

    //父向子传值并单击选项删除局部组件
    let TodoItem = {
        props: ['content','index'],
        template: "<li @click='handleItemClick'>{{content}}</li>",
        methods: {
            handleItemClick: function () {
                this.$emit("delete",this.index);
            }
        }
    };
    let app = new Vue({
        el: '#app',
        components: {
            TodoItem: TodoItem
        },
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            handleBtnClick: function () {
                this.list.push(this.inputValue);
                this.inputValue = '';
            },
            handleItemDelete: function (index) {
                this.list.splice(index,1);
            }
        }
    });
</script>
</body>
</html>